/**
 * DataOverview 组件 - 数据概览页面
 * 展示用户的作品数据和分发数据，包括数据统计、图表展示和创建作品功能
 */

import { Button, Empty, Tabs } from "antd";
import ReactECharts from "echarts-for-react";
import React, { useState } from "react";
import styles from "./style.module.css";

/**
 * 组件属性接口定义
 * @interface DataOverviewProps
 * @property {object} publishData - 发布数据对象
 * @property {number} publishData.downloads - 下载数量
 * @property {number} publishData.created - 创建数量
 * @property {number} publishData.collected - 收集数量
 */
interface DataOverviewProps {
  publishData: {
    downloads: number;
    created: number;
    collected: number;
  };
}

/**
 * 生成最近7天的日期数据
 * @returns {Array<{date: string, value: number}>} 包含最近7天日期的数组
 */
const generateLast7DaysData = () => {
  const data = [];
  for (let i = 6; i >= 0; i--) {
    const date = new Date();
    date.setDate(date.getDate() - i);
    const formattedDate = `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    data.push({
      date: formattedDate,
      value: 0
    });
  }
  return data;
};

const DataOverview: React.FC<DataOverviewProps> = ({ publishData }) => {
  // 状态管理
  const [activeMainTab, setActiveMainTab] = useState("workData"); // 主标签页状态：作品数据/分发数据
  const [activeSubTab, setActiveSubTab] = useState("initiated"); // 子标签页状态：我发起的/我参与的
  const [showCreateModal, setShowCreateModal] = useState(false); // 创建作品模态框显示状态

  /**
   * 饼图数据配置
   * 展示不同类型作品的数量分布
   */
  const pieData = [
    { name: "H5", value: 1 },
    { name: "海报", value: 1 },
    { name: "表单", value: 1 },
    { name: "长页", value: 1 },
    { name: "互动", value: 1 },
    { name: "视频", value: 1 },
  ];

  /**
   * 折线图数据配置
   * 展示最近7天的数据趋势
   */
  const lineData = generateLast7DaysData();

  /**
   * ECharts 饼图配置项
   * 配置饼图的样式、标签、提示框等
   */
  const pieOption = {
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "制作数量",
        type: "pie",
        radius: "75%",
        center: ["50%", "50%"],
        data: pieData,
        label: {
          formatter: "{b}",
          position: "outside",
          overflow: "break",
        },
        labelLine: {
          length: 5,
          length2: 1,
          smooth: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.2)",
          },
        },
        avoidLabelOverlap: false,
      },
    ],
  };

  /**
   * ECharts 折线图配置项
   * 配置折线图的坐标轴、图例、数据系列等
   */
  const lineOption = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["新增总表单（份）", "新增被浏览（次）"],
      bottom: 0,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: lineData.map((item) => item.date),
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 1,
      splitNumber: 5,
    },
    series: [
      {
        name: "新增总表单（份）",
        type: "line",
        data: lineData.map(() => 0),
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          color: "#1890ff",
        },
        itemStyle: {
          color: "#1890ff",
        },
      },
      {
        name: "新增被浏览（次）",
        type: "line",
        data: lineData.map((item) => item.value),
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          color: "#faad14",
        },
        itemStyle: {
          color: "#faad14",
        },
      },
    ],
  };

  /**
   * 创建作品模态框组件
   * 展示各种作品类型的创建入口
   */
  const CreateModal = () => (
    <div className={styles.modal_mask}>
      <div className={styles.make_modal}>
        <span 
          className={styles.close_icon}
          onClick={() => setShowCreateModal(false)}
        >
          ×
        </span>
        <div className={styles.modal_header}>
          <h3>创建作品</h3>
        </div>
        <div className={styles.modal_body}>
          <div className={styles.scene_list}>
            {/* H5 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/h5.ba57eddd.svg" 
                  alt="H5" 
                />
              </div>
              <div className={styles.title}>H5</div>
              <div className={styles.desc}>零基础快速制作翻页H5</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 表单 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/form.6a5d57d7.svg" 
                  alt="表单" 
                />
              </div>
              <div className={styles.title}>表单</div>
              <div className={styles.desc}>投票/报名/考试/问卷/收款/预约等</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 长页 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/long.d68c7903.svg" 
                  alt="长页" 
                />
              </div>
              <div className={styles.title}>长页</div>
              <div className={styles.desc}>一页到底图文单页制作工具</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 互动 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/hd.23924b13.svg" 
                  alt="互动" 
                />
              </div>
              <div className={styles.title}>互动</div>
              <div className={styles.desc}>专业制作互动类H5页面利器</div>
              <div className={styles.create}>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 海报 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/h2.c2a7f0c5.svg" 
                  alt="海报" 
                />
              </div>
              <div className={styles.title}>海报</div>
              <div className={styles.desc}>在线作图神器</div>
              <div className={styles.create}>
                <div className={styles.create_btn}> <a href="/box">空白创建</a></div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 电子画册 */}  
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/hc.bbad7074.svg" 
                  alt="电子画册" 
                />
              </div>
              <div className={styles.title}>电子画册</div>
              <div className={styles.desc}>3D翻页电子画册制作</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* 视频 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/video.5e825703.svg" 
                  alt="视频" 
                />
              </div>
              <div className={styles.title}>视频</div>
              <div className={styles.desc}>在线简易视频编辑和制作</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
            
            {/* AI创作 */}
            <div className={styles.category_box}>
              <div className={styles.icon_box}>
                <img 
                  src="https://www.eqxiu.com/eip-common/img/AI.55265b40.svg" 
                  alt="AI创作" 
                />
              </div>
              <div className={styles.title}>AI创作</div>
              <div className={styles.desc}>智能生成文案/绘画/H5/长页</div>
              <div className={styles.create}>
                <div className={styles.create_btn}>空白创建</div>
                <a className={styles.btn_primary}>模板创建</a>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.form_title}>
          <span>创意工具</span>
          <span className={styles.more}>查看更多 </span>
        </div>
        <div className={styles.form_list}>
          <div className={styles.category_box}>
            <div className={styles.content_area}>
              <div className={styles.title}>AI数字人定制</div>
              <div className={styles.desc}>1:1克隆真人形象</div>
            </div>
          </div>
          <div className={styles.category_box}>
            <div className={styles.content_area}>
              <div className={styles.title}>AI投票</div>
              <div className={styles.desc}>自动生成投票作品</div>
            </div>
          </div>
          <div className={styles.category_box}>
            <div className={styles.content_area}>
              <div className={styles.title}>AI答题</div>
              <div className={styles.desc}>一键生成AI答题活动</div>
            </div>
          </div>
          <div className={styles.category_box}>
            <div className={styles.content_area}>
              <div className={styles.title}>AI文案</div>
              <div className={styles.desc}>快速生成多类型文案</div>
            </div>
          </div>
          <div className={styles.category_box}>
            <div className={styles.content_area}>
              <div className={styles.title}>AI问卷</div>
              <div className={styles.desc}>轻松制作问卷作品</div>
            </div>
          </div>
        </div>
        <div className={styles.form_bottom}>热门场景</div>
        <div className={styles.hot_list}>
          <div className={styles.category_box_list1}>易拉宝</div>
          <div className={styles.category_box_list2}>电子名片</div>
          <div className={styles.category_box_list3}>个人名片</div>
          <div className={styles.category_box_list4}>搬家邀请函</div>
          <div className={styles.category_box_list5}>优秀员工</div>
          <div className={styles.category_box_list6}>年会盛典</div>
          <div className={styles.category_box_list7}>企业活动邀请函</div>
          <div className={styles.category_box_list8}>义诊</div>
        </div>
      </div>
    </div>
  );

  /**
   * 渲染作品数据内容
   * 包括活跃周报、数据统计和图表展示
   */
  const renderWorkData = () => (
    <div className={styles.content}>
      <div className={styles.leftSection}>
        <div className={styles.reportSection}>
          <div className={styles.reportHeader}>
            <div className={styles.reportTitle}>
              <h3>活跃周报</h3>
              <span>5.26-6.01</span>
            </div>
            <Button type="primary" size="small" className={styles.createBtn} onClick={() => setShowCreateModal(true)}>
              去制作
            </Button>
          </div>
          <div className={styles.reportContent}>
            <div className={styles.statsContainer}>
              <div className={styles.statsGrid}>
                <div className={styles.statItem}>
                  <span className={styles.statValue}>
                    {publishData.downloads}
                  </span>
                  <span className={styles.statLabel}>下载作品</span>
                  <span className={styles.comparison}>周对比 0</span>
                </div>
                <div className={styles.statItem}>
                  <span className={styles.statValue}>
                    {publishData.created}
                  </span>
                  <span className={styles.statLabel}>创建作品</span>
                  <span
                    className={
                      `${styles.comparison} ` +
                      (publishData.created - 0 > 0
                        ? styles.positive
                        : publishData.created - 0 < 0
                        ? styles.negative
                        : "")
                    }
                  >
                    周对比 {publishData.created - 0 > 0 ? "+" : ""}
                    {publishData.created - 0}
                  </span>
                </div>
                <div className={styles.statItem}>
                  <span className={styles.statValue}>
                    {publishData.collected}
                  </span>
                  <span className={styles.statLabel}>积分获取</span>
                  <span className={styles.comparison}>周对比 0</span>
                </div>
              </div>
              <div className={styles.pieChartContainer}>
                <ReactECharts
                  option={pieOption}
                  style={{ width: 240, height: 240 }}
                />
                <div className={styles.pieChartTitle}>制作数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.rightSection}>
        <div className={styles.dataAnalysis}>
          <h3>数据分析</h3>
          <div className={styles.lineChartContainer}>
            <ReactECharts option={lineOption} style={{ height: 300 }} />
          </div>
        </div>
      </div>
    </div>
  );

  /**
   * 渲染分发数据内容
   * 展示我发起的和我参与的分发数据
   */
  const renderDistributionData = () => (
    <div className={styles.tabSection}>
      <Tabs
        activeKey={activeSubTab}
        onChange={setActiveSubTab}
        items={[
          {
            key: "initiated",
            label: "我发起的",
            children: <Empty description="还没有参与作品分发" />,
          },
          {
            key: "participated",
            label: "我参与的",
            children: <Empty description="还没有参与作品分发" />,
          },
        ]}
      />
    </div>
  );

  // 渲染主组件
  return (
    <>
      <div className={styles.mainTabs}>
        <div className={styles.tabList}>
          <h3 className={styles.title}>我的数据</h3>
          <div className={styles.tabButtons}>
            <span
              className={`${styles.tab} ${
                activeMainTab === "workData" ? styles.active : ""
              }`}
              onClick={() => setActiveMainTab("workData")}
            >
              作品数据
            </span>
            <span
              className={`${styles.tab} ${
                activeMainTab === "distributionData" ? styles.active : ""
              }`}
              onClick={() => setActiveMainTab("distributionData")}
            >
              分发数据
            </span>
          </div>
        </div>
        <span className={styles.more}>查看更多 ›</span>
      </div>
      {activeMainTab === "workData" && renderWorkData()}
      {activeMainTab === "distributionData" && renderDistributionData()}
      {showCreateModal && <CreateModal />}
    </>
  );
};

export default DataOverview;
